<template>
  <div class="order">
    <x-header style="background-color:#000;" :left-options="{showBack: false}">
      全部订单
    </x-header>
    <tab>
      <tab-item selected @click.native="getOrders()">全部订单</tab-item>
      <tab-item @click.native="getUnpay()">待支付</tab-item>
      <tab-item @click.native="getPay()">已支付</tab-item>
    </tab>
    <!-- <div class="list">
      <img src="https://img.alicdn.com/imgextra/i3/2171367772/TB2gl0VaDdYBeNkSmLyXXXfnVXa_!!2171367772.jpg" alt="商品详情">
      <div class="des">
        <p>韩版bf纯色百搭圆领长袖T恤女秋装学生休闲上衣宽松显瘦打底衫潮</p>
        <p class="text-orange">金额:58</p>
        <p class="text-deep-grey">size:m</p>
      </div>
      
    </div> -->
    <div class="content">
      <template v-for="item in result">
        <div class="list">
          <img :src="item.cpicture" alt="">
          <div class="des">
            <p>{{item.cid}}</p>
            <p class="text-orange">金额:{{item.caprice}}</p>
            <p class="text-deep-grey">size:{{item.csize}}</p>
            <p class="text-deep-grey">支付状态:{{item.cstatus}}</p>
          </div>
        </div>
      </template>
    </div>

    
  </div>
</template>
<script>
import {XHeader,Tab,TabItem} from 'vux'
import api from '../api/cart.js'

export default {
  data(){
    return {
      result:[]
    }
  },
  components:{
    XHeader,Tab,TabItem
  },
  created() {
    //api
     this.getOrders()
  },
  methods:{
    getOrders(){
      api.getOrders((res)=>{
        this.result = res.data;
      },(err)=>{

      },{})
    },
    getUnpay(){
      api.getOrderUnpay((res)=>{
        this.result = res.data;
      },(err)=>{

      },{})
    },
    getPay(){
      api.getOrderPay((res)=>{
        this.result = res.data;
      },(err)=>{

      },{})
    }
  }
}
</script>
<style>
  .vux-tab-ink-bar{
        color: #f60;
      /* border-bottom: 3px solid #f60; */
      background-color: #f60 !important;

    }
    
</style>
<style lang="less" scoped>
  .order{
    .vux-tab .vux-tab-item.vux-tab-selected{
      color: #f60;
      border-bottom: 3px solid #f60;
      
    }
    .content{
      margin-bottom: 20vw;
      .list{
        display: flex;
        justify-content: space-around;
        border-bottom: 1px solid #eee;
        padding-top: 2vw;
        padding-bottom: 2vw;
        img{
          // width: 50vw;
          height: 50vw;
        }
        .des{
          // display: flex;
          p{
            // margin-top: 2vw;
            margin-bottom: 2vw;
          }
          
        }
      }
    }
    
  }
</style>